<template>
    <div >
        <div class="listBox">
            <div class="listBox_head">
                <el-button type="primary" @click="newBuiltQuestion">新建问题</el-button>
            </div>
            <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
                @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange" :showPage="false">
                <template v-slot:isShow="{ scope }">
                    {{scope.row.isShow == 1?'显示':'隐藏'}}
                </template>
                <template v-slot:operate="{ scope }">
                    <el-button type="text" @click="problemModify(scope.row)" size="small">编辑</el-button>
                    <el-button type="text" @click="problemDelete(scope.row)" size="small">删除</el-button>
                    <el-button type="text" @click="frontEndDisplayHidden(scope.row)" size="small" v-if="scope.row.isShow == 2">前端显示</el-button>
                    <el-button type="text" @click="frontEndDisplayHidden(scope.row)" size="small" v-if="scope.row.isShow == 1">前端隐藏</el-button>
                </template>
            </ex-table>
        </div>
        <ContentDialog v-if="detailDialog" :id="id" :visible.sync="detailDialog" @success="_handleSuccess" />
    </div>
</template>

<script>
import ContentDialog from "./contentDialog";
import handlePageMixin from "@/mixins/handlePageMixin";
import { questionContentList,questionContentChangeShow,deleteQuestionContent } from "@/api/setting/syProblemConfiguration";
export default {
    name: 'BeeTokenSystemH5QuestionContent',
    components: {
        ContentDialog,
    },
    mixins: [handlePageMixin],
    data() {
        return {
            loading: false,
            detailDialog: false,
            id:'',
            tableData: [],
            tableColumn: [
                { prop: "questionType", label: "分类" },
                { prop: "title", label: "标题" },
                { prop: "updateTime", label: "更新时间" },
                { prop: "sort", label: "排序" },
                { prop: "isShow",slot: true, slotName: "isShow", label: "状态" },
                {
                label: "操作",
                slot: true,
                slotName: "operate",
                width: "180",
                fixed: "right",
                },
            ],
        };
    },
    created () {
        this.getList()  
    },
    mounted() {

    },

    methods: {
        getList() {
            const params = {
                ...this.pageOptions,
            };
            questionContentList(params)
                .then((res) => {
                    // const { total, records } = res.result;
                    // this.$refs.table.pageOptions.total = total;
                   this.tableData = res.result;
                })
                .finally(() => {
               
                });
            },
        // 新建问题
        newBuiltQuestion(){
            this.id = ''
            this.detailDialog = true
        },
        // 编辑
        problemModify(item) {
            this.id = item.id
            this.detailDialog = true
        },
        // 删除
        problemDelete(row){
        this.$confirm("你确定要删除（" + row.title + "）？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            deleteQuestionContent(row.id)
            .then((res) => {
              const {} = res.result;
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
              });
              this.getList();
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
        },
        // 前端显示、隐藏
        frontEndDisplayHidden(row){
            var title = ''
            if(row.isShow == 1){
                title = '前端隐藏？'
            }else if(row.isShow == 2){
                title = '前端显示？'
            }
        
        this.$confirm(title, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            questionContentChangeShow(row.id).then(res=>{
                this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
              });
              this.getList();
            })
          }).catch(() => {});

        },

        // 添加成功
        _handleSuccess() {
            // this.detailDialog = false
            this.pageOptions.pageNum = 1
            this.$refs.table.pageOptions.pageNum = 1
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
    .listBox {
        background-color: #fff;
        margin-top: 10px;
        padding: 20px;
     }
     .listBox_head {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 20px;
        .el-button{
            height: 35px;
        }
        .btnBox{
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            margin-left: 20px;
        }
     }

</style>